<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./src/react.js"></script>
    <script src="./src/react-dom.js"></script>
    <script src="./src/babel.js"></script>
</head>

<body>
    <div id="app"></div>
</body>
<script type="text/babel">
    function List() {
        let arr=[]
        setTimeout(()=>{
            arr=[11,22,33,444]
        },2000)
        
        return (<ul>
            {
                arr.map((item,i)=> <li key={i}>{item}</li>)
               
              
            }
          
            </ul>)
    }
    class  List2 extends React.Component{
        constructor(){
            super()
            console.log(this);
            this.state={
                arr:[]
            }
        }
        componentDidMount(){
            setTimeout(()=>{
                this.setState({
                    arr:[111,222,333]
                })
            },2000)
            setInterval(()=>{
                this.setState({
                    time:new Date().toLocaleString()
                })
            },1000)
        }
        render(){
            return(
                <ul>
                    {
                        this.state.arr.map((item,i)=><li key={i}>{item}</li>)
                    }
                    <p>{this.state.time}</p>
                    </ul>
            )
        }
    }
    ReactDOM.render(
        <div>
            <List></List><List2></List2></div>,
        document.getElementById('app')
    )
</script>

</html>